<template>
  <div class="chat-container">
    <div class="chat-title">
      <img :src="group.avatar" class="chat-avatar"/>
      <div class="chat-name">{{ group.name }}<div class="chat-newname">{{ group.newname }}</div></div>

       <div class="msg-card" >
          <div class="msg-row" v-if="isSy">
            <img class="msg-icon" src="../../public/static/images/msg-icon.png" alt="">
            <span>用户已确认订单！</span>
          </div>
          <div class="msg-row" v-if="isNullEnter">
            <img class="msg-icon" src="../../public/static/images/msg-icon-null.png" alt="">
            <span>用户未确定订单！</span>
          </div>
        </div>
        
    </div>
    <div class="chat-main scroll-view" ref="scrollView">
      <div class="message-list" ref="messageList">
        
       <div class="chat-content">
         <!-- 修改水印容器定位和样式 -->
          <div class="watermark-container" v-if="isSy">
            <div class="watermark-grid">
              <span v-for="i in 1000" :key="i" class="watermark-text">订单已确认</span>
            </div>
          </div>

        <div v-if="history.loading" class="history-loading">
          <img src="../assets/images/pending.gif"/>
        </div>
        <div v-else :class="history.allLoaded ? 'history-loaded':'load'" @click="loadHistoryMessage(false)">
          {{ history.allLoaded ? '已经没有更多的历史消息' : '获取历史消息' }}
        </div>
        <div v-for="(message, index) in history.messages" :key="index">
          <div class="time-tips">{{ renderMessageDate(message, index) }}</div>
          <div class="message-recalled" v-if="message.recalled">
            <div v-if="message.recaller.id === currentUser.id" class="message-recalled-self">
              <div>你撤回了一条消息</div>
              <span v-if="message.type === 'text' && Date.now()-message.timestamp< 60 * 1000 "
                    @click="editRecalledMessage(message.payload.text)">重新编辑</span>
            </div>
            <div v-else>{{ message.recaller.data.name }}撤回了一条消息</div>
          </div>
          <div class="message-item" v-else>
            <div class="message-item-checkbox" v-if="messageSelector.visible && message.status !== 'sending'">
              <input class="input-checkbox" type="checkbox" :value="message.messageId" v-model="messageSelector.ids"
                     @click="selectMessages">
            </div>
            <div class="message-item-content" :class="{ self: message.senderId === currentUser.id }">
              <div class="sender-info">
                <img v-if="currentUser.id === message.senderId" :src="currentUser.avatar" class="sender-avatar"/>
                <img v-else :src="message.senderData.avatar" class="sender-avatar"/>
              </div>
              <div class="message-content" @click.right="showActionPopup(message)">
                <p style="color: #C8C8C8;text-align: right" v-if="currentUser.id === message.senderId">{{currentUser?.name}}</p>
                <p style="color: #C8C8C8" v-else>{{message.senderData?.name}}</p>
                <div class="message-payload">
                  <div class="pending" v-if="message.status === 'sending'"></div>
                  <div class="send-fail" v-if="message.status === 'fail'"></div>
                  <div v-if="message.type === 'text'" class="content-text"
                       v-html="emoji.decoder.decode(message.payload.text)"></div>
                  <div v-if="message.type === 'image'" class="content-image"
                       @click="showImagePreviewPopup(message.payload.url)">
                    <img :src="message.payload.thumbnail" />
                  </div>
                   <div v-if="message.type === 'newImage'" class="content-image"
                       @click="showImagePreviewPopup(message.payload.image)">
                    <img :src="message.payload.thumbnailImage" />
                  </div>
                  <div class="enterOrder" v-if="message.type === 'enterOrder'">
											<div class="header">
												<div class="lf">
													<img class="msg-icon"
														src="/static/images/order-enter-msg-icon.png" mode="" />
													<span>订单已确认</span>
												</div>
												<div class="time">{{message.payload.time}}</div>
											</div>
											<div class="content">
												<div class="col">
													<img class="msg-icon" style="width: 20px;height: 20px;"
														src="/static/images/orderid-icon.png" mode="">
													<span class="label">订单号:</span>
													<span class="val">{{message.payload.orderId}}</span>
												</div>
												<div class="col">
													<img class="msg-icon" src="/static/images/time-icon.png" mode="">
													<span class="label">确认时间:</span>
													<span class="val">{{message.payload.time}}</span>
												</div>
											</div>
									</div>
                  <template v-if="message.type === 'newImages'">
                     <div class="content-image" v-for="(img, index) in message.payload.images" :key="index"
                       @click="showImagePreviewPopup(img.previewUrl)">
                      <img :src="img.thumbnailUrl" />
                    </div>
                  </template>
                  <a v-if="message.type === 'file'" :href="message.payload.url" target="_blank" download="download">
                    <div class="content-file" title="点击下载">
                      <div class="file-info">
                        <span class="file-name">{{ message.payload.name }}</span>
                        <span class="file-size">{{ (message.payload.size / 1024).toFixed(2) }}KB</span>
                      </div>
                      <img class="file-img" src="../assets/images/file-icon.png"/>
                    </div>
                  </a>
                  <div v-if="message.type ==='audio'" class="content-audio" @click="playAudio(message)">
                    <div class="audio-facade" :style="{width:Math.ceil(message.payload.duration)*7 + 50 + 'px'}">
                      <div class="audio-facade-bg" :class="{'play-icon':audioPlayer.playingMessage === message}"></div>
                      <div>{{ Math.ceil(message.payload.duration) || 1 }}<span>"</span></div>
                    </div>
                  </div>
                  <goeasy-video-player
                    v-if="message.type === 'video'"
                    :thumbnail="message.payload.thumbnail"
                    :src="message.payload.video.url"
                  />
                  <div v-if="message.type === 'order'" class="content-order">
                    <div class="order-id">订单号：{{ message.payload.id }}</div>
                    <div class="order-body">
                      <img :src="message.payload.url" class="order-img"/>
                      <div class="order-name">{{ message.payload.name }}</div>
                      <div>
                        <div class="order-price">{{ message.payload.price }}</div>
                        <div class="order-count">共{{ message.payload.count }}件</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    <div class="chat-footer">
      <div class="action-delete" v-if="messageSelector.visible">
        <img class="delete-btn" src="../assets/images/delete.png" @click="deleteMultipleMessages"/>
        <div>删除</div>
      </div>
      <div class="action-box" v-else>
        <div class="action-bar">
          <!-- 表情 -->
          <div class="action-item">
            <div v-if="emoji.visible" class="emoji-box">
              <img
                v-for="(emojiItem, emojiKey, index) in emoji.map"
                class="emoji-item"
                :key="index"
                :src="emoji.url + emojiItem"
                @click="chooseEmoji(emojiKey)"
              />
            </div>
            <i class="iconfont icon-smile" title="表情" @click="showEmojiBox"></i>
          </div>
          <!-- 图片 -->
          <div class="action-item">
            <label for="img-input">
              <i class="iconfont icon-picture" title="图片"></i>
            </label>
            <input v-show="false" id="img-input" accept="image/*" multiple type="file"
                   @change="sendImageMessage"/>
          </div>
          <!-- 视频 -->
          <!-- <div class="action-item">
            <label for="video-input"><i class="iconfont icon-film" title="视频"></i></label>
            <input v-show="false" id="video-input" accept="video/*" type="file"
                   @change="sendVideoMessage"/>
          </div> -->
          <!-- 文件 -->
          <!-- <div class="action-item">
            <label for="file-input">
              <i class="iconfont icon-wj-wjj" title="文件"></i>
            </label>
            <input v-show="false" id="file-input" type="file"
                   @change="sendFileMessage"/>
          </div> -->
          <!-- 自定义-订单消息 -->
          <!-- <div class="action-item">
            <i class="iconfont icon-liebiao" title="订单" @click="showOrderMessageList"></i>
          </div> -->
        </div>

        <!-- GoEasyIM最大支持3k的文本消息，如需发送长文本，需调整输入框maxlength值 -->
        <div class="input-box" ref="inputboxRef" @dragover="handleIptDragover" @drop="handleIptDrop" contenteditable="true" @paste="onInputPaste" @input="handleInput" @focus="onInputFocus"  @keyup.enter="sendTextMessage">
          <!-- <textarea ref="input" @paste="onInputPaste" @focus="onInputFocus" @keyup.enter="sendTextMessage" v-model="text" maxlength="700" autocomplete="off" class="input-content"></textarea> -->
        </div>
        <div class="send-box">
          <button class="send-button" @click="sendTextMessage">发送</button>
        </div>
      </div>
    </div>
    <!-- 语音播放器 -->
    <audio ref="audioPlayer" @ended="onAudioPlayEnd" @pause="onAudioPlayEnd"></audio>
    <!-- 图片预览弹窗 -->
    <div v-if="imagePreview.visible" class="image-preview">
      <img :src="imagePreview.url" alt="图片"/>
      <span class="close" @click="hideImagePreviewPopup">×</span>
    </div>
    <!-- 消息删除撤回弹窗 -->
    <div class="action-popup" v-if="actionPopup.visible" @click="actionPopup.visible = false">
      <div class="action-popup-main">
        <div class="action-item" @click="handleDownLoadImage">下载</div>
        <div class="action-item" @click="deleteSingleMessage">删除</div>
        <div class="action-item" v-if="actionPopup.recallable" @click="recallMessage">撤回</div>
        <div class="action-item" @click="showCheckBox">多选</div>
        <div class="action-item" @click="actionPopup.visible = false">取消</div>
      </div>
    </div>
    <!-- 订单弹窗 -->
    <div v-if="orderList.visible" class="order-box">
      <div class="order-list">
        <div class="title">
          <div>请选择一个订单</div>
          <span @click="closeOrderMessageList">×</span>
        </div>
        <div v-for="(order, index) in orderList.orders" :key="index" class="order-item"
             @click="sendOrderMessage(order)">
          <div class="order-id">订单号：{{ order.id }}</div>
          <div class="order-body">
            <img :src="order.url" class="order-img"/>
            <div class="order-name">{{ order.name }}</div>
            <div>
              <div class="order-price">{{ order.price }}</div>
              <div class="order-count">共{{ order.count }}件</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 拖拽图片的弹窗 -->
    <div v-if="isShowDragImg" class="drag-img-box shadow-md">
      <div class="close" @click="isShowDragImg = false">x</div>
      <h4 class="title">
        发送给: 
      </h4>
      <div class="info">
        <img :src="group.avatar" class="chat-avatar"/>
        <div class="chat-name">{{ group.name }}</div>
      </div>
      <div class="list">
        <div class="li" v-for="(item, index) in dragImgList" :key="index">
          <p>[图片] {{ item.name }}</p>
        </div>
      </div>
      <div class="footer">
        <button class="send-btn" @click="handleSendPopDragImg">发送</button>
        <button class="clear-btn" @click="isShowDragImg = false">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import {formatDate} from '../utils/utils.js'
  import restApi, { UploadImages, getStoreIamgeListAPI, getOrderDateilsAPI, getPsIamgeListAPI } from '../api/restapi';
  import EmojiDecoder from '../utils/EmojiDecoder';
  import GoeasyVideoPlayer from "../components/GoEasyVideoPlayer";
  import Storage from "@/utils/Storage";

  const IMAGE_MAX_WIDTH = 200;
  const IMAGE_MAX_HEIGHT = 150;
  export default {
    name: 'GroupChat',
    components: {
      GoeasyVideoPlayer,
    },
    data() {
      const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/';
      const emojiMap = {
        '[NO]': 'emoji_0@2x.png',
        '[OK]': 'emoji_1@2x.png',
        '[下雨]': 'emoji_2@2x.png',
        '[么么哒]': 'emoji_3@2x.png',
        '[乒乓]': 'emoji_4@2x.png',
        '[便便]': 'emoji_5@2x.png',
        '[信封]': 'emoji_6@2x.png',
        '[偷笑]': 'emoji_7@2x.png',
        '[傲慢]': 'emoji_8@2x.png',
        '[再见]': 'emoji_9@2x.png',
        '[冷汗]': 'emoji_10@2x.png',
        '[凋谢]': 'emoji_11@2x.png',
        '[刀]': 'emoji_12@2x.png',
        '[删除]': 'emoji_13@2x.png',
        '[勾引]': 'emoji_14@2x.png',
        '[发呆]': 'emoji_15@2x.png',
        '[发抖]': 'emoji_16@2x.png',
        '[可怜]': 'emoji_17@2x.png',
        '[可爱]': 'emoji_18@2x.png',
        '[右哼哼]': 'emoji_19@2x.png',
        '[右太极]': 'emoji_20@2x.png',
        '[右车头]': 'emoji_21@2x.png',
        '[吐]': 'emoji_22@2x.png',
        '[吓]': 'emoji_23@2x.png',
        '[咒骂]': 'emoji_24@2x.png',
        '[咖啡]': 'emoji_25@2x.png',
        '[啤酒]': 'emoji_26@2x.png',
        '[嘘]': 'emoji_27@2x.png',
        '[回头]': 'emoji_28@2x.png',
        '[困]': 'emoji_29@2x.png',
        '[坏笑]': 'emoji_30@2x.png',
        '[多云]': 'emoji_31@2x.png',
        '[大兵]': 'emoji_32@2x.png',
        '[大哭]': 'emoji_33@2x.png',
        '[太阳]': 'emoji_34@2x.png',
        '[奋斗]': 'emoji_35@2x.png',
        '[奶瓶]': 'emoji_36@2x.png',
        '[委屈]': 'emoji_37@2x.png',
        '[害羞]': 'emoji_38@2x.png',
        '[尴尬]': 'emoji_39@2x.png',
        '[左哼哼]': 'emoji_40@2x.png',
        '[左太极]': 'emoji_41@2x.png',
        '[左车头]': 'emoji_42@2x.png',
        '[差劲]': 'emoji_43@2x.png',
        '[弱]': 'emoji_44@2x.png',
        '[强]': 'emoji_45@2x.png',
        '[彩带]': 'emoji_46@2x.png',
        '[彩球]': 'emoji_47@2x.png',
        '[得意]': 'emoji_48@2x.png',
        '[微笑]': 'emoji_49@2x.png',
        '[心碎了]': 'emoji_50@2x.png',
        '[快哭了]': 'emoji_51@2x.png',
        '[怄火]': 'emoji_52@2x.png',
        '[怒]': 'emoji_53@2x.png',
        '[惊恐]': 'emoji_54@2x.png',
        '[惊讶]': 'emoji_55@2x.png',
        '[憨笑]': 'emoji_56@2x.png',
        '[手枪]': 'emoji_57@2x.png',
        '[打哈欠]': 'emoji_58@2x.png',
        '[抓狂]': 'emoji_59@2x.png',
        '[折磨]': 'emoji_60@2x.png',
        '[抠鼻]': 'emoji_61@2x.png',
        '[抱抱]': 'emoji_62@2x.png',
        '[抱拳]': 'emoji_63@2x.png',
        '[拳头]': 'emoji_64@2x.png',
        '[挥手]': 'emoji_65@2x.png',
        '[握手]': 'emoji_66@2x.png',
        '[撇嘴]': 'emoji_67@2x.png',
        '[擦汗]': 'emoji_68@2x.png',
        '[敲打]': 'emoji_69@2x.png',
        '[晕]': 'emoji_70@2x.png',
        '[月亮]': 'emoji_71@2x.png',
        '[棒棒糖]': 'emoji_72@2x.png',
        '[汽车]': 'emoji_73@2x.png',
        '[沙发]': 'emoji_74@2x.png',
        '[流汗]': 'emoji_75@2x.png',
        '[流泪]': 'emoji_76@2x.png',
        '[激动]': 'emoji_77@2x.png',
        '[灯泡]': 'emoji_78@2x.png',
        '[炸弹]': 'emoji_79@2x.png',
        '[熊猫]': 'emoji_80@2x.png',
        '[爆筋]': 'emoji_81@2x.png',
        '[爱你]': 'emoji_82@2x.png',
        '[爱心]': 'emoji_83@2x.png',
        '[爱情]': 'emoji_84@2x.png',
        '[猪头]': 'emoji_85@2x.png',
        '[猫咪]': 'emoji_86@2x.png',
        '[献吻]': 'emoji_87@2x.png',
        '[玫瑰]': 'emoji_88@2x.png',
        '[瓢虫]': 'emoji_89@2x.png',
        '[疑问]': 'emoji_90@2x.png',
        '[白眼]': 'emoji_91@2x.png',
        '[皮球]': 'emoji_92@2x.png',
        '[睡觉]': 'emoji_93@2x.png',
        '[磕头]': 'emoji_94@2x.png',
        '[示爱]': 'emoji_95@2x.png',
        '[礼品袋]': 'emoji_96@2x.png',
        '[礼物]': 'emoji_97@2x.png',
        '[篮球]': 'emoji_98@2x.png',
        '[米饭]': 'emoji_99@2x.png',
        '[糗大了]': 'emoji_100@2x.png',
        '[红双喜]': 'emoji_101@2x.png',
        '[红灯笼]': 'emoji_102@2x.png',
        '[纸巾]': 'emoji_103@2x.png',
        '[胜利]': 'emoji_104@2x.png',
        '[色]': 'emoji_105@2x.png',
        '[药]': 'emoji_106@2x.png',
        '[菜刀]': 'emoji_107@2x.png',
        '[蛋糕]': 'emoji_108@2x.png',
        '[蜡烛]': 'emoji_109@2x.png',
        '[街舞]': 'emoji_110@2x.png',
        '[衰]': 'emoji_111@2x.png',
        '[西瓜]': 'emoji_112@2x.png',
        '[调皮]': 'emoji_113@2x.png',
        '[象棋]': 'emoji_114@2x.png',
        '[跳绳]': 'emoji_115@2x.png',
        '[跳跳]': 'emoji_116@2x.png',
        '[车厢]': 'emoji_117@2x.png',
        '[转圈]': 'emoji_118@2x.png',
        '[鄙视]': 'emoji_119@2x.png',
        '[酷]': 'emoji_120@2x.png',
        '[钞票]': 'emoji_121@2x.png',
        '[钻戒]': 'emoji_122@2x.png',
        '[闪电]': 'emoji_123@2x.png',
        '[闭嘴]': 'emoji_124@2x.png',
        '[闹钟]': 'emoji_125@2x.png',
        '[阴险]': 'emoji_126@2x.png',
        '[难过]': 'emoji_127@2x.png',
        '[雨伞]': 'emoji_128@2x.png',
        '[青蛙]': 'emoji_129@2x.png',
        '[面条]': 'emoji_130@2x.png',
        '[鞭炮]': 'emoji_131@2x.png',
        '[风车]': 'emoji_132@2x.png',
        '[飞吻]': 'emoji_133@2x.png',
        '[飞机]': 'emoji_134@2x.png',
        '[饥饿]': 'emoji_135@2x.png',
        '[香蕉]': 'emoji_136@2x.png',
        '[骷髅]': 'emoji_137@2x.png',
        '[麦克风]': 'emoji_138@2x.png',
        '[麻将]': 'emoji_139@2x.png',
        '[鼓掌]': 'emoji_140@2x.png',
        '[龇牙]': 'emoji_141@2x.png'
      };
      return {
        currentUser: null,
        group: null,

        to: {},//用于创建消息时传入

        history: {
          messages: [],
          allLoaded: false,
          loading: true
        },

        text: '',

        //定义表情列表
        emoji: {
          url: emojiUrl,
          map: emojiMap,
          visible: false,
          decoder: new EmojiDecoder(emojiUrl, emojiMap),
        },
        // 订单消息
        orderList: {
          orders: [],
          visible: false,
        },
        // 图片预览弹出框
        imagePreview: {
          visible: false,
          url: ''
        },
        audioPlayer: {
          playingMessage: null,
        },
        // 展示消息删除弹出框
        actionPopup: {
          visible: false,
          message: null,
          recallable: false,
        },
        // 消息选择
        messageSelector: {
          visible: false,
          ids: []
        },
        newImgs: [], // 一键发送图片
        plyloadImgs: [], // 粘贴上传的图片保存
        finalMsg: [], // 最终发送的消息
        isSy: true, // 是否确认订单
        isNullEnter: false, // 未确认订单
        isShowDragImg: false, // 是否发送拖拽上传的图片
      };
    },
   async created() {
    const id = this.$route.params.id
    const { name, avatar,newname} = this.$route.query
    const that = this
      this.group = {
        id,
        name,
        avatar,
		newname,
        type: this.$route.query.type,
      };

      const type = this.$route.query.type;
  
      this.currentUser = Storage.get('currentUser')? JSON.parse(Storage.get('currentUser')) : this.globalData.currentUser; 

      this.to = {
        type: this.GoEasy.IM_SCENE.GROUP,
        id: this.group.id,
        data: {name: this.group.name, avatar: this.group.avatar},
      };
      await this.handleShowEnterOrder(id)
      this.loadHistoryMessage(true);
      this.goEasy.im.on(this.GoEasy.IM_EVENT.GROUP_MESSAGE_RECEIVED, this.onReceivedGroupMessage);

      const imgTypes = ['original', 'finish']
      if(type && imgTypes.includes(type)) { // 判断是否一键发送是图片的
        const {code, data} = await getStoreIamgeListAPI({ type, groupId: id, id: this.currentUser.id })
        if(code == 0) {
          this.newImgs = data.map(item => ({
            ...item,
            isSend: false
          }))
          data.forEach((item, idx) => {
             that.easyNewImageMsg('newImage', { image:item.previewUrl, thumbnailImage: item.thumbnailUrl})
             that.newImgs[idx].isSend = true
          })
          // 发送多条消息的形式
          if(this.newImgs.every(item => item.isSend)) { 
            this.$router.replace({path: `/conversations/groupchat/${id}?name=${name}&avatar=${avatar}`})
          }
          // 发送单挑消息的形式
          // this.easyNewImageMsg('newImages', { images: data}, () => {
          //   that.$router.replace({path: `/conversations/groupchat/${id}?name=${name}&avatar=${avatar}`});
          // })
        }
      }

      const photoshopImgTypes = ['allps', 'oneps']
      if(type && photoshopImgTypes.includes(type)) {
        const {itemId, itemItemId} = this.$route.query
        const params = {
           type, 
           groupId: id, 
           id: this.currentUser.id 
         }
        params.itemId = itemId
        params.itemItemId = itemItemId
        
        const {data, code} = await getPsIamgeListAPI(params)
        if(code == 0) {
          this.newImgs = data.map(item => ({
            ...item,
            isSend: false
          }))

          this.newImgs.forEach((item, idx) => {
             that.easyNewImageMsg('newImage', { image:item.previewUrl, thumbnailImage: item.thumbnailUrl})
             that.newImgs[idx].isSend = true
          })

          // 发送多条消息的形式
          if(this.newImgs.every(item => item.isSend)) { 
            this.$router.replace({path: `/conversations/groupchat/${id}?name=${name}&avatar=${avatar}`})
          }
        }
      }
    },
    beforeDestroy() {
      this.goEasy.im.off(this.GoEasy.IM_EVENT.GROUP_MESSAGE_RECEIVED, this.onReceivedGroupMessage);
    },
    methods: {
      formatDate,
      onReceivedGroupMessage(message) {
        let groupId = message.groupId;
        if (groupId === this.group.id) {
          if(message.type === 'enterOrder') {
            this.isSy = true
            this.isNullEnter = false
          }
          this.history.messages.push(message);
          this.markGroupMessageAsRead();
        }
        this.scrollToBottom();
      },
      /**
       * 核心就是设置高度，产生明确占位
       *
       * 小  (宽度和高度都小于预设尺寸)
       *    设高=原始高度
       * 宽 (宽度>高度)
       *    高度= 根据宽度等比缩放
       * 窄  (宽度<高度)或方(宽度=高度)
       *    设高=MAX height
       *
       * @param width,height
       * @returns number
       */
      getImageHeight(width, height) {
        if (width < IMAGE_MAX_WIDTH && height < IMAGE_MAX_HEIGHT) {
          return height;
        } else if (width > height) {
          return IMAGE_MAX_WIDTH / width * height;
        } else if (width === height || width < height) {
          return IMAGE_MAX_HEIGHT;
        }
      },
      playAudio(audioMessage) {
        let playingMessage = this.audioPlayer.playingMessage;

        if (playingMessage) {
          this.$refs.audioPlayer.pause();
          // 如果点击的消息正在播放，就认为是停止播放操作
          if (playingMessage === audioMessage) {
            return;
          }
        }

        this.audioPlayer.playingMessage = audioMessage;
        this.$refs.audioPlayer.src = audioMessage.payload.url;
        this.$refs.audioPlayer.load();
        this.$refs.audioPlayer.currentTime = 0;
        this.$refs.audioPlayer.play();
      },
      onAudioPlayEnd() {
        this.audioPlayer.playingMessage = null;
      },
      sendTextMessage() {
        const that = this
        if(this.plyloadImgs.length > 0){ // 如果有图片和文字，则发送自定义图片消息和文本消息
          const filterImgIdxs = []
          this.finalMsg.forEach((item, idx) => {
            if(item == '<img>') {
              filterImgIdxs.push(idx)
            }
          })

          this.finalMsg.forEach((item, index) => {
            if(item == '<img>') {
              const oldIdx = filterImgIdxs.findIndex(idx => idx == index)
              const payload = this.plyloadImgs[oldIdx]
              that.easyNewImageMsg('newImage', payload)
            } else {
              that.handleSendMessage(item)
            }
          })
        } else { // 只有文字 走原先的逻辑进行发送
          this.handleSendMessage(this.text)
        }
        this.$refs.inputboxRef.innerHTML = '';
        this.text = '';
        this.plyloadImgs = [];
      },
      handleSendMessage(msg) {
        if (!msg.trim()) {
          console.log('输入为空');
          return
        }
        this.goEasy.im.createTextMessage({
          text: msg,
          to: this.to,
          onSuccess: (message) => {
            this.sendMessage(message);
          },
          onFailed: (err) => {
            console.log("创建消息err:", err);
          }
        });
      },
      onInputFocus () {
        this.emoji.visible = false;
      },
      showEmojiBox() {
        this.emoji.visible = !this.emoji.visible;
      },
      chooseEmoji(emojiKey) {
        this.text += emojiKey;
        this.$refs.inputboxRef.innerHTML += emojiKey;
        this.emoji.visible = false;
      },
      sendImageMessage(e) {
        let fileList = [...e.target.files];
        const that = this
        fileList.forEach(async(file) => {
          const formData = new FormData()
          formData.append('file', file);
          const {code, data} = await UploadImages(formData)
          if(code == 0) {
            that.easyNewImageMsg('newImage', { image:data.src, thumbnailImage: data.src})
          }
        })
      },
      easyNewImageMsg(type,payload,callBack) {
        const that = this;
        const customMessage = this.goEasy.im.createCustomMessage({
            type,  //消息类型
            payload,  
            to: this.to,
        });
        this.goEasy.im.sendMessage({
          message: customMessage,
          onSuccess: function (message) {  //发送成功
            that.sendMessage(message);
            if(callBack) callBack()
          },
          onFailed: function (error) { //发送失败
            console.log('Failed to send message，code:' + error.code + ',error' + error.content);
          }
        });
      },
      handleSendPopDragImg() { // 发送拖拽图片
        const that = this
        const files = this.dragImgList
        Object.values(files).forEach(async (file) => {
          if(file.type.split('/')[0] == 'image') {
           const formData = new FormData()
            formData.append('file', file);
            const {code, data} = await UploadImages(formData)
            if(code == 0) {
              that.easyNewImageMsg('newImage', { image:data.src, thumbnailImage: data.src})
            }
          }
        })
        this.isShowDragImg = false
        this.dragImgList = []
      },
      handleIptDrop(e) { // 拖拽完成
        e.stopPropagation();
        e.preventDefault();
        const files = e.dataTransfer.files;
        if(files.length > 0) {
            this.dragImgList = files
            this.isShowDragImg = true
        }
      },
      handleIptDragover(e) { /// 拖拽时的
        e.stopPropagation(); // 阻止冒泡
        e.preventDefault(); // 阻止默认行为
        e.dataTransfer.dropEffect = 'copy'; // 允许拖放
      },
      async onInputPaste(e) { // 输入框
        let file = null;
        const that = this
				const items = (e.clipboardData || window.clipboardData).items;
        if (items && items.length) {
					for (var i = 0; i < items.length; i++) {
            console.log(items[i])
						if (items[i].type.includes("image")) {
							file = items[i].getAsFile();
							break;
						}
					}
				};

        if (file) {
          const type = file.type.split("/")[0];
          if(type === "image") {
            const formData = new FormData()
            formData.append('file', file);
            // 此时获取到file文件对象，即可处理上传相关逻辑
            const {code, data} = await UploadImages(formData)
            if(code == 0) {
               this.plyloadImgs.push({ image:data.src, thumbnailImage: data.src})
            }
          }
				}
      },
      handleInput(e) {
        const inputString = e.target.innerHTML
        const final = this.handleParserNode(inputString)

        if((final.length == 1 || final.length == 0) && !final.includes('<img>')) {
          if(final.length == 0) { 
            this.text = ''
          } else {
            this.text = final.join('');
          }
          console.log(this.text)
        } else {
          // 获取当前输入的情况，判断是否需要删除已经上传的图片
          const finalFilters = final.filter(item => item != '<img>') ?? []
          const finalFilLen = finalFilters.length // 输入框中过滤后图片的长度
          const plyloadImgsLen = this.plyloadImgs.length // 已上传的图片数量
          if(finalFilters.length > 0) {
            if(plyloadImgsLen > finalFilLen) {
              const diffCount = plyloadImgsLen - finalFilLen
              while(diffCount > 0) {
                this.plyloadImgs.pop()
                diffCount--
              }
            }
          } else {
            this.plyloadImgs = []
          }
          this.finalMsg = final
          console.log(final)
          console.log(this.plyloadImgs)
        }
      },
      handleParserNode(inputString) {
        // 创建一个DOMParser实例
        const parser = new DOMParser();
        // 将HTML字符串解析成一个文档对象
        const doc = parser.parseFromString(inputString, 'text/html');
        // 创建一个数组来存储结果
        const results = [];
        // 递归函数，用于遍历文档对象并收集文本和元素
        function traverseNode(node) {
          if (node.nodeType === Node.TEXT_NODE) {
            // 对于文本节点，去除前后的空白字符后添加到结果中
            results.push(node.textContent.trim());
          } else if (node.nodeType === Node.ELEMENT_NODE) {
            // 对于元素节点，将开标签和闭标签（如果适用）添加到结果中
            // 注意：这里只是简单地添加了标签，没有处理标签的属性
            results.push(`<${node.tagName.toLowerCase()}>`);
            // 遍历子节点
            Array.from(node.childNodes).forEach(traverseNode);
            // 注意：对于自闭合标签（如<img>），我们不需要闭标签，但这里为了简单起见没有处理这种情况
            // 在实际应用中，你可能需要根据标签类型来决定是否添加闭标签
            // 另外，对于需要闭标签的元素，你应该在遍历完所有子节点后再添加闭标签
            // 但由于我们这里的示例只是为了展示如何分隔文本和标签，所以简化了处理逻辑
            // 正确的做法应该是使用一个栈来跟踪打开的标签，并在适当的时候添加闭标签
          }
          // 注意：这里忽略了其他类型的节点（如注释节点、文档类型节点等）
        }
        // 从文档的body节点开始遍历（或者从doc.documentElement开始遍历整个文档）
        traverseNode(doc.body);

        return results.splice(1, results.length -1)
      },
      sendVideoMessage(e) {
        const file = e.target.files[0];
        this.goEasy.im.createVideoMessage({
          file: file,
          to: this.to,
          onProgress: function (progress) {
            console.log(progress)
          },
          onSuccess: (message) => {
            this.sendMessage(message);
          },
          onFailed: (e) => {
            console.log('error :', e);
          }
        });
      },
      async handleShowEnterOrder(id) {
				const {
					data,
					status
				} = await getOrderDateilsAPI({
					id
				})
				if (status) {
					const {
						isPs,
						isQd,
						isTag
					} = data
					if (Boolean(data.isPs) && Boolean(data.isTag) && !Boolean(data.isQd)) {
						this.isSy = true
					}

	        if (Boolean(data.isPs) && Boolean(data.isQd)) {
						this.isNullEnter = true
					}
				}
			},
      sendFileMessage(e) {
        const file = e.target.files[0];
        this.goEasy.im.createFileMessage({
          file: file,
          to: this.to,
          onProgress: function (progress) {
            console.log(progress)
          },
          onSuccess: (message) => {
            this.sendMessage(message);
          },
          onFailed: (e) => {
            console.log('error :', e);
          }
        });
      },
      closeOrderMessageList() {
        this.orderList.visible = false;
      },
      showOrderMessageList() {
        this.orderList.orders = restApi.getOrderList();
        this.orderList.visible = true;
      },
      sendOrderMessage(order) {
        this.orderList.visible = false;
        this.goEasy.im.createCustomMessage({
          type: 'order',
          payload: order,
          to: this.to,
          onSuccess: (message) => {
            this.sendMessage(message);
          },
          onFailed: (err) => {
            console.log("创建消息err:", err);
          }
        });
      },
      sendMessage(message) {
        console.log(message)
        this.history.messages.push(message);
        this.scrollToBottom();
        this.goEasy.im.sendMessage({
          message: message,
          onSuccess: (message) => {
            console.log('发送成功', message);
          },
          onFailed: function (error) {
            if (error.code === 507) {
              alert('发送语音/图片/视频/文件失败，没有配置OSS存储');
              console.log('发送语音/图片/视频/文件失败，没有配置OSS存储，详情参考：https://docs.goeasy.io/2.x/im/message/media/alioss');
            } else {
              console.log('发送失败:', error);
            }
          }
        });
      },
      showActionPopup(message) {
        const MAX_RECALLABLE_TIME = 3 * 60 * 1000; //3分钟以内的消息才可以撤回
        this.messageSelector.ids = [message.messageId];
        if ((Date.now() - message.timestamp) < MAX_RECALLABLE_TIME && message.senderId === this.currentUser.id && message.status === 'success') {
          this.actionPopup.recallable = true;
        } else {
          this.actionPopup.recallable = false;
        }
        this.actionPopup.visible = true;
      },
      deleteSingleMessage() {
        this.actionPopup.visible = false;
        this.deleteMessage();
      },
      deleteMultipleMessages() {
        if (this.messageSelector.ids.length > 0) {
          this.messageSelector.visible = false;
          this.deleteMessage();
        }
      },
      deleteMessage() {
        let conf = confirm("确认删除？");
        if (conf === true) {
          let selectedMessages = [];
          this.history.messages.forEach((message) => {
            if (this.messageSelector.ids.includes(message.messageId)) {
              selectedMessages.push(message);
            }
          });
          this.goEasy.im.deleteMessage({
            messages: selectedMessages,
            onSuccess: () => {
              selectedMessages.forEach((message) => {
                let index = this.history.messages.indexOf(message);
                if (index > -1) {
                  this.history.messages.splice(index, 1);
                }
              });
              this.messageSelector.ids = [];
            },
            onFailed: (error) => {
              console.log('error:', error);
            },
          });
        } else {
          this.messageSelector.ids = [];
        }
      },
      handleDownLoadImage() {
         this.history.messages.forEach(async(message) => {
          if (this.messageSelector.ids.includes(message.messageId)) {
            const payload = message.payload;
            const imgUrl = payload.image;
             let { data } = await axios.get(imgUrl, {
              responseType: 'blob'
            })
            const blobData = URL.createObjectURL(data)
            const a = document.createElement('a')
            a.href = blobData
            a.download = `型格目录-${this.group.name}-${new Date().getTime()}.png`
            a.click()
          }
        });
        // image
      },
      recallMessage() {
        let selectedMessages = [];
        this.history.messages.forEach((message) => {
          if (this.messageSelector.ids.includes(message.messageId)) {
            selectedMessages.push(message);
          }
        });
        this.actionPopup.visible = false;
        this.goEasy.im.recallMessage({
          messages: selectedMessages,
          onSuccess: () => {
            console.log('撤回成功');
          },
          onFailed: (error) => {
            console.log('撤回失败,error:', error);
          }
        });
      },
      editRecalledMessage(text) {
        this.text = text;
      },
      showImagePreviewPopup(url) {
        this.imagePreview.visible = true;
        this.imagePreview.url = url;
      },
      hideImagePreviewPopup() {
        this.imagePreview.visible = false;
      },
      showCheckBox() {
        this.messageSelector.ids = [];
        this.messageSelector.visible = true;
        this.actionPopup.visible = false;
      },
      selectMessages(e) {
        if (e.target.checked) {
          this.messageSelector.ids.push(e.target.value)
        } else {
          let index = this.messageSelector.ids.indexOf(e.target.value);
          if (index > -1) {
            this.messageSelector.ids.splice(index, 1);
          }
        }
      },
      loadHistoryMessage(scrollToBottom) {
        this.history.loading = true;
        //历史消息
        let lastMessageTimeStamp = null;
        let lastMessage = this.history.messages[0];
        if (lastMessage) {
          lastMessageTimeStamp = lastMessage.timestamp;
        }
        this.goEasy.im.history({
          id: this.group.id,
          type: this.GoEasy.IM_SCENE.GROUP,
          lastTimestamp: lastMessageTimeStamp,
          limit: 10,
          onSuccess: (result) => {
            this.history.loading = false;
            let messages = result.content;
            if (messages.length === 0) {
              this.history.allLoaded = true;
            } else {
              if (lastMessageTimeStamp) {
                this.history.messages = messages.concat(this.history.messages);
              } else {
                this.history.messages = messages;
              }
              if (messages.length < 10) {
                this.history.allLoaded = true;
              }
              if (scrollToBottom) {
                this.scrollToBottom();
                //收到的消息设置为已读
                this.markGroupMessageAsRead();
              }
            }
          },
          onFailed: (error) => {
            //获取失败
            this.history.loading = false;
            console.log('获取历史消息失败, code:' + error.code + ',错误信息:' + error.content);
          },
        });
      },
      markGroupMessageAsRead() {
        this.goEasy.im.markMessageAsRead({
          id: this.to.id,
          type: this.to.type,
          onSuccess: function () {
            console.log('标记群聊已读成功');
          },
          onFailed: function (error) {
            console.log('标记群聊已读失败', error);
          },
        });
      },
      scrollToBottom() {
        this.$nextTick(() => {
          this.$refs.scrollView.scrollTop = this.$refs.messageList.scrollHeight;
        });
      },
      renderMessageDate(message, index) {
        if (index === 0) {
          return this.formatDate(message.timestamp);
        } else {
          if (message.timestamp - this.history.messages[index - 1].timestamp > 5 * 60 * 1000) {
            return this.formatDate(message.timestamp);
          }
        }
        return '';
      }
    },
  };
</script>

<style scoped>
    .scroll-view {
      flex: 1;
      position: relative;
      overflow-y: auto;
      height: calc(100vh - 120px);
      /* 添加固定高度，减去底部输入框高度 */
      padding-bottom: 0;
      box-sizing: border-box;
      /* 移除底部内边距 */
    }

  .chat-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

  .chat-main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    position: relative; /* 添加相对定位 */
  }

  .chat-content {
    position: relative;
    min-height: 100%;
  }

  /* 修改水印容器样式 */
  .watermark-container {
    position: absolute; /* 改为绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }

  .watermark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: minmax(50px, auto);
    transform: rotate(-45deg) scale(1.5);
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
  }

  .watermark-text {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.08); /* 调整水印透明度 */
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

    div[contenteditable="true"] {
      position: relative;
      max-width: 549px;
      height: 80px;
      overflow-y: scroll;
      border: none;
      padding: 5px;
      outline-style: none;
    }

    .msg-card {
      flex-shrink: 0;
      /* padding: 8px 14px; */
      /* box-shadow:0 6px 30px 5px rgba(0, 0, 0, .05), 0 16px 24px 2px rgba(0, 0, 0, .04), 0 8px 10px -5px rgba(0, 0, 0, .08); */
    }

    .msg-card .msg-row {
      display: flex;
      align-items: center;
      font-size: 16px;
    }

    .msg-card  .msg-icon {
      width: 34px;
      height: 34px;
      margin-right: 4px;
    }

  .chat-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .chat-title {
    height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-size: 18px;
  }

  .chat-avatar {
    width: 35px;
    height: 35px;
  }

  .chat-name {
    width: 400px;
    font-size: 15px;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .chat-newname {
    font-size: 10px;
	color:#b3b3b3;
  }
  .chat-main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
  }

  .chat-main::-webkit-scrollbar {
    width: 0;
  }

  .chat-main .history-loaded {
    text-align: center;
    font-size: 12px;
    color: #cccccc;
    line-height: 20px;
  }

  .chat-main .load {
    text-align: center;
    font-size: 12px;
    color: #d02129;
    line-height: 20px;
    cursor: pointer;
  }

  .history-loading {
    width: 100%;
    text-align: center;
  }

  .time-tips {
    color: #999;
    text-align: center;
    font-size: 12px;
  }

  .message-list {
    position: relative;
    z-index: 2;
    padding: 0 10px;
  }

  .message-item {
    display: flex;
  }

  .message-item-checkbox {
    height: 50px;
    margin-right: 15px;
    display: flex;
    align-items: center;
  }

  .input-checkbox {
    position: relative;
  }

  .message-item-checkbox input[type="checkbox"]::before, .message-item-checkbox input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    background: #FFFFFF;
    width: 18px;
    height: 18px;
    border: 1px solid #cccccc;
    border-radius: 50%;
  }

  .message-item-checkbox input[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #d02129;
    width: 18px;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
  }

  .message-item-content {
    flex: 1;
    margin: 5px 0;
    overflow: hidden;
    display: flex;
  }

  .sender-info {
    margin: 0 5px;
  }

  .sender-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .message-content {
    max-width: calc(100% - 100px);
  }

  .message-payload {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .self {
    justify-content: flex-end;
  }

  .pending {
    background: url("../assets/images/pending.gif") no-repeat center;
    background-size: 13px;
    width: 15px;
    height: 15px;
  }

  .send-fail {
    background: url("../assets/images/failed.png") no-repeat center;
    background-size: 15px;
    width: 18px;
    height: 18px;
    margin-right: 3px;
  }

  .content-text {
    display: flex;
    align-items: center;
    text-align: left;
    background: #eeeeee;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 8px;
    margin: 3px 0;
    line-height: 25px;
    white-space: pre-line;
    overflow-wrap: anywhere;
    border-radius: 8px;
    word-break: break-all;
  }

  .content-image {
    display: block;
    cursor: pointer;
  }

  .content-image img {
    max-height: 200px;
  }

  .content-audio {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .content-audio .audio-facade {
    min-width: 12px;
    background: #eeeeee;
    border-radius: 7px;
    display: flex;
    font-size: 14px;
    padding: 8px;
    margin: 5px 0;
    line-height: 25px;
    cursor: pointer;
  }

  .content-audio .audio-facade-bg {
    background: url("../assets/images/voice.png") no-repeat center;
    background-size: 15px;
    width: 20px;
  }

  .content-audio .audio-facade-bg.play-icon {
    background: url("../assets/images/play.gif") no-repeat center;
    background-size: 20px;
  }

  .content-order {
    border-radius: 5px;
    border: 1px solid #eeeeee;
    padding: 8px;
    display: flex;
    flex-direction: column;
  }

  .content-order .order-id {
    font-size: 12px;
    color: #666666;
    margin-bottom: 5px;
  }

  .content-order .order-body {
    display: flex;
    font-size: 13px;
    padding: 5px;
  }

  .content-order .order-img {
    width: 70px;
    height: 70px;
    border-radius: 5px;
  }

  .content-order .order-name {
    margin-left: 10px;
    width: 135px;
    color: #606164;
  }

  .content-order .order-count {
    font-size: 12px;
    color: #666666;
    flex: 1;
  }

  .content-file {
    width: 240px;
    height: 65px;
    font-size: 15px;
    background: #FFFFFF;
    border: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
  }

  .content-file:hover {
    background: #f1f1f1;
  }

  .file-info {
    width: 194px;
    text-align: left;
  }

  .file-name {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .file-size {
    font-size: 12px;
    color: #ccc;
  }

  .file-img {
    width: 50px;
    height: 50px;
  }

  .message-item .self {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
  }

  .message-item .self .audio-facade {
    flex-direction: row-reverse;
  }

  .message-item .self .audio-facade-bg {
    background: url("../assets/images/voice.png") no-repeat center;
    background-size: 15px;
    width: 20px;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .message-item .self .play-icon {
    background: url("../assets/images/play.gif") no-repeat center;
    background-size: 20px;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .message-recalled {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 28px;
    font-size: 13px;
    text-align: center;
    color: grey;
    margin-top: 10px;
  }

  .message-recalled-self {
    display: flex;
  }

  .message-recalled-self span {
    margin-left: 5px;
    color: #D02129;
    cursor: pointer;
  }

  .chat-footer {
    border-top: 1px solid #dcdfe6;
    width: 100%;
    height: 140px;
    background: #FFFFFF;
  }

  .action-delete {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
  }

  .delete-btn {
    width: 25px;
    height: 25px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .action-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .action-bar {
    display: flex;
    flex-direction: row;
    padding: 0 10px;
  }

  .action-bar .action-item {
    text-align: left;
    padding: 10px 0;
    position: relative;
  }

  .action-bar .action-item .iconfont {
    font-size: 22px;
    margin: 0 10px;
    z-index: 3;
    color: #606266;
    cursor: pointer;
  }

  .action-bar .action-item .iconfont:focus {
    outline: none;
  }

  .action-bar .action-item .iconfont:hover {
    color: #d02129;
  }

  .emoji-box {
    width: 546px;
    position: absolute;
    top: -470px;
    left: -11px;
    z-index: 2007;
    background: #fff;
    border: 1px solid #ebeef5;
    padding: 12px;
    text-align: justify;
    font-size: 14px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    word-break: break-all;
    border-radius: 4px;
  }

  .emoji-item {
    width: 38px;
    height: 38px;
    margin: 0 2px;
  }

  .input-box {
    padding: 0 10px;
    flex: 1;
  }

  .input-content {
    border: none;
    resize: none;
    display: block;
    padding: 5px 15px;
    box-sizing: border-box;
    width: 100%;
    color: #606266;
    outline: none;
    background: #FFFFFF;
    word-break: break-all;
  }

  .send-box {
    padding: 5px 10px;
    text-align: right;
  }

  .send-button {
    width: 70px;
    height: 30px;
    font-size: 15px;
    border: 1px solid #d02129;
    background-color: #ffffff;
    color: #d02129;
    border-radius: 5px;
  }

  .action-popup {
    width: 848px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -281px;
    background: rgba(51, 51, 51, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .action-popup-main {
    width: 150px;
    height: 120px;
    background: #ffffff;
    z-index: 100;
    border-radius: 10px;
    overflow: hidden;
  }

  .action-popup-main .action-item {
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    color: #262628;
    border-bottom: 1px solid #efefef;
    cursor: pointer;
  }

  .image-preview {
    padding: 50px;
    max-width: 750px;
    max-height: 500px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
  }

  .image-preview img {
    max-width: 750px;
    max-height: 500px;
  }

  .image-preview .close {
        font-size: 50px;
    line-height: 24px;
    cursor: pointer;
    color: #FFFFFF;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1002;
  }

  .order-box {
    width: 848px;
    position: absolute;
    left: -281px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2007;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 33, 33, 0.7);
  }

  .order-list {
    width: 300px;
    background: #F1F1F1;
    border-radius: 5px;
  }

  .order-list .title {
    font-weight: 600;
    font-size: 15px;
    color: #000000;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .order-list .title span {
    font-size: 28px;
    font-weight: 400;
    cursor: pointer;
  }

  .order-list .order-item {
    padding: 10px;
    background: #FFFFFF;
    margin: 10px;
    border-radius: 5px;
    cursor: pointer;
  }

  .order-list .order-id {
    font-size: 12px;
    color: #666666;
    margin-bottom: 5px;
  }

  .order-list .order-body {
    display: flex;
    font-size: 13px;
    justify-content: space-between;
  }

  .order-list .order-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }

  .order-list .order-name {
    width: 160px;
  }

  .order-list .order-count {
    font-size: 12px;
    color: #666666;
    flex: 1;
  }

.enterOrder {
	padding: 10px 12px;
	border-radius: 8px;
  margin: 4px 0;
  background: #EEEEEE;
	box-shadow: 0 4px 6px -1px rgb(255 255 255/ 0.6), 0 2px 4px -2px rgb(255 255 255 / 0.9);
	/* background-color: #fff; */
}

.enterOrder .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 2rpx solid #E7E9EC;
}

.enterOrder .msg-icon {
	width: 24px;
	height: 24px;
}

.enterOrder .header .lf {
	display: flex;
	align-items: center;
	color: #16A355;
	font-size: 16px;
	font-weight: 600;
}

.enterOrder .header .lf .msg-icon {
	margin-right: 4px;
}

.enterOrder .content {
	margin: 0 !important;
}

.enterOrder .header .time {
	color: #737A87;
	opacity: .92;
}

.enterOrder .col {
	display: flex;
	align-items: center;
	color: #444;
	margin-bottom: 5px;
	font-size: 14px;
}

.enterOrder .col .label {
	margin-left: 4px;
	margin-right: 2px;
}

.drag-img-box {
  width: 380px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 16px 22px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 8px;
  z-index:999;
}

.drag-img-box  .close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #939393;
}

.drag-img-box .title {
  font-size: 19px;
  font-weight: 500;
  color: #999999;
  margin: 0;
}

.drag-img-box .info {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.drag-img-box .info .chat-name {
  font-size: 16px;
}

.drag-img-box  .list {
  padding: 12px 8px;
  background-color: #F7F7F7;
  border-radius: 8px;
  font-size: 16px;
  color: #999;
}

.drag-img-box .footer {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.drag-img-box .send-btn,
.drag-img-box .clear-btn {
  width: 90px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
  border: none;
  font-size: 15px;
}

.drag-img-box .send-btn {
  background-color: #D02129;
  color: #fff;
  margin-right: 10px;
}

.drag-img-box .clear-btn {
  border: 1px solid #E7E7E7;
  background-color: #fff;
  color: #606060;
}

.shadow-md {
			--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
			--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
</style>
